<div class="layout-container layout-column">
    <div class="mb4j-padding-all">
        <i-row>
            <i-col span="16">
                <button-group>
                    <i-button 
                        icon="ios-add-circle-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onAddClicked" />
                    <i-button 
                        icon="ios-remove-circle-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onRemoveClicked" />
                    <i-button 
                        icon="ios-create-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onEditClicked" />
                    <i-button 
                        icon="ios-settings-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onAllocClicked" />
                </button-group>
            </i-col>
            <i-col span="8">
                <i-input search 
                :enter-button="search.button"
                :placeholder="search.placeholder" @on-search="onSearch" />
            </i-col>
        </i-row>
    </div>
    <div class="layout-main mb4j-padding-lbr">
        <i-table 
            ref="selection"
            :height="paging.height" 
            :loading="paging.loading" 
            :columns="paging.columns" 
            :data="paging.data"
            @on-selection-change="onSelectionChange"></i-table>
    </div>
    <div class="layout-footer">
        <Page 
            :current="paging.page"
            :total="paging.total" 
            :page-size="paging.pageSize" 
            show-total
            show-elevator 
            @on-change="onPageChange" />
    </div>
</div>